<template>
  <div class="container">
    <div class="mb10">
      <el-text class="mx-1"> 查询条件：</el-text>
    </div>
    <el-row :gutter="10">
      <el-col :xl="4" :lg="6" :md="12" :sm="24">
        <el-select v-model.trim="searchCondition.platform" placeholder="请选择下单平台" clearable>
          <el-option v-for="item in selectPlatformType" :label="item.dictLabel" :value="item.dictValue" :key="item.id"></el-option>
        </el-select>
      </el-col>
      <el-col :xl="4" :lg="6" :md="12" :sm="24">
        <el-select v-model.trim="searchCondition.rent_mobile_order_type" placeholder="请选择租机类型" clearable>
          <el-option v-for="item in rentMobileOrderType" :label="item.dictLabel" :value="item.dictValue" :key="item.dictValue"></el-option>
        </el-select>
      </el-col>
      <el-col :xl="4" :lg="6" :md="12" :sm="24">
        <el-input v-model="searchCondition.order_sn" clearable placeholder="请输入订单编号"></el-input>
      </el-col>
      <el-col :xl="4" :lg="6" :md="12" :sm="24">
        <el-input v-model.trim="searchCondition.out_bill_no" placeholder="小店订单号" clearable></el-input>
      </el-col>
      <el-col :xl="4" :lg="6" :md="12" :sm="24">
        <el-input v-model.trim="searchCondition.name" placeholder="下单人姓名" clearable></el-input>
      </el-col>
      <el-col :xl="4" :lg="6" :md="12" :sm="24">
        <el-input v-model.trim="searchCondition.mobile" placeholder="下单人手机号" clearable></el-input>
      </el-col>
      <el-col :xl="4" :lg="6" :md="12" :sm="24">
        <el-input v-model.trim="searchCondition.id_number" placeholder="身份证号" clearable></el-input>
      </el-col>
      <el-col :xl="4" :lg="6" :md="12" :sm="24">
        <el-select v-model.trim="searchCondition.pay_status" placeholder="是否有支付账单" clearable>
          <el-option v-for="item in selectWhether" :label="item.dictLabel" :value="item.dictValue" :key="item.id"></el-option>
        </el-select>
      </el-col>
      <el-col :xl="4" :lg="6" :md="12" :sm="24">
        <el-select v-model.trim="searchCondition.is_axz" placeholder="是否唤起预授权" clearable>
          <el-option v-for="item in selectWhether" :label="item.dictLabel" :value="item.dictValue" :key="item.id"></el-option>
        </el-select>
      </el-col>
      <el-col :xl="4" :lg="6" :md="12" :sm="24">
        <el-select v-model.trim="searchCondition.delivery_type" placeholder="配送方式" clearable>
          <el-option v-for="item in deliveryTypeList" :label="item.dictLabel" :value="item.dictValue" :key="item.id"></el-option>
        </el-select>
      </el-col>
      <el-col :xl="4" :lg="6" :md="12" :sm="24">
        <el-input placeholder="请选择绑定的店铺" disabled v-model="searchCondition.bind_store_name" clearable>
          <template #append>
            <el-button :icon="Search" @click="handleSelectStore" v-show="!searchCondition.bind_store_name">查询</el-button>
            <el-button :icon="CircleClose" @click="handleClearStoreInfo" v-show="searchCondition.bind_store_name">删除</el-button>
          </template>
        </el-input>
      </el-col>
      <el-col :xl="4" :lg="6" :md="12" :sm="24">
        <el-select v-model.trim="searchCondition.self_employed" placeholder="是否自营店铺" clearable>
          <el-option v-for="item in selectWhether" :label="item.dictLabel" :value="item.dictValue" :key="item.id"></el-option>
        </el-select>
      </el-col>
      <el-col :xl="4" :lg="6" :md="12" :sm="24">
        <el-select v-model.trim="searchCondition.order_status" placeholder="请选择订单状态" clearable>
          <el-option v-for="item in orderStatusList" :label="item.dictLabel" :value="item.dictValue" :key="item.id"></el-option>
        </el-select>
      </el-col>
      <el-col :xl="4" :lg="6" :md="12" :sm="24">
        <el-select v-model.trim="searchCondition.customer_id" placeholder="选择分配的客服" clearable>
          <el-option v-for="item in customerList" :label="item.nick_name" :value="item.id" :key="item.id"></el-option>
        </el-select>
      </el-col>
      <el-col :xl="4" :lg="6" :md="12" :sm="24">
        <el-date-picker v-model="queryDate" type="datetimerange" range-separator="至" format="YYYY-MM-DD HH:mm:ss" value-format="X" start-placeholder="创建时间" @change="changeQueryDate" end-placeholder="结束时间"> </el-date-picker>
      </el-col>
      <el-col :xl="4" :lg="6" :md="12" :sm="24" class="mb10">
        <el-select v-model.trim="searchCondition.search_type" placeholder="订单快速查询" clearable>
          <el-option v-for="item in selectSearchType" :label="item.dictLabel" :value="item.dictValue" :key="item.id"></el-option>
        </el-select>
      </el-col>
      <el-col :xl="4" :lg="6" :md="12" :sm="24">
        <el-space wrap>
          <el-button type="success" :icon="Search" :disabled="disabledbtn" @click="searchInfo">搜索</el-button>
          <el-button type="warning" :icon="Refresh" :disabled="disabledbtn" @click="resetSearch">重置</el-button>
        </el-space>
      </el-col>
    </el-row>
    <div class="mb10">
      <el-text class="mx-1"> 查询结果：</el-text>
    </div>
    <el-space wrap class="mb20">
      <el-button type="primary" :icon="Plus" :disabled="disabledbtn" @click="changeFormStatus('add')" v-permission="'add'">新增</el-button>
      <el-button type="primary" :icon="Download" class="mr10" :disabled="disabledbtn" v-permission="'export'" @click="handleExportRentMobileOrderInfo">导出</el-button>
    </el-space>
    <el-table :data="tableList" border class="table" row-key="id" ref="multipleTableRef" v-loading="loading" :reserve-selection="true" @row-dblclick="rowDblclick">
      <el-table-column type="index" align="center"> </el-table-column>
      <el-table-column prop="customer.nick_name" label="分配客服" width="120" align="center"> </el-table-column>
      <el-table-column prop="bannerTypeName" label="下单人信息" align="">
        <template #default="scope">
          <div class="ibDraggable">
            <div>
              姓名：<span class="red fwb">{{ scope.row.firstName }}</span
              ><span>{{ scope.row.lastName }}</span>
            </div>
            <div>
              手机号：<span>{{ scope.row.firstPhone }}</span
              ><span class="red fwb">{{ scope.row.lastPhone }}</span
              ><el-button type="text" v-permission="'getOrderUserMobile'" v-show="scope.row.mobile.includes('****')" :disabledbtn="disabledbtn" class="pd0" @click="handleViewMobile(scope.row)">查看 </el-button>
            </div>
            <div>身份证：{{ scope.row.id_number }}</div>
            <div>待审核订单数：{{ scope.row.order_count }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="positionName" label="订单信息">
        <template #default="scope">
          <div class="ibDraggable">
            <div>创建时间：{{ handleVerifyFormatDate(scope.row.create_time) }}</div>
            <div>下单平台：{{ scope.row.platform_name }}</div>
            <div>租机类型：{{ scope.row.rent_mobile_order_type_name }}</div>
            <div v-if="scope.row.order_rent_type">租赁模式：{{ scope.row.order_rent_type.name }}</div>
            <div v-if="scope.row.service_key_name">服务：{{ scope.row.service_key_name }}</div>
            <div v-if="scope.row.card_contract_package_name">号卡套餐：{{ scope.row.card_contract_package_name }}</div>
            <div v-if="scope.row.user_note">用户备注：{{ scope.row.user_note }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="bannerTypeName" label="订单详情" align="">
        <template #default="scope">
          <div class="ibDraggable">
            <div>型号：{{ scope.row.goods_name }}{{ scope.row.spec_key_name }}</div>
          </div>
          <div class="ibDraggable" v-if="scope.row.bindStore !== null">
            <div>店铺：{{ scope.row.bindStore.store_name }}{{ scope.row.bindStore.self_employed == 1 ? "(自营店铺)" : "" }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="platform_note" label="平台备注" align="">
        <template #default="scope">
          <div class="ibDraggable" v-if="scope.row.platform_note">
            <div>客服：{{ scope.row.platform_note.nick_name }}</div>
            <div>内容：{{ scope.row.platform_note.action_note }}</div>
            <div>时间：{{ handleVerifyFormatDate(scope.row.platform_note.log_time) }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="pay_status" label="状态" align="center">
        <template #default="scope">
          <div class="w-tag">
            <el-tag :type="scope.row.pay_status === 1 ? 'success' : scope.row.pay_status === 0 ? 'danger' : 'info'">{{ scope.row.pay_status === 1 ? "有支付账单" : "未支付账单" }}</el-tag>
            <el-tag class="ml10" :type="scope.row.aixzu_order !== null ? 'success' : 'danger'">{{ scope.row.aixzu_order !== null ? "已唤起预授权" : "未唤起预授权" }}</el-tag>
          </div>
          <div class="mt10">{{ scope.row.status_name }}，{{ scope.row.delivery_type_name }}</div>
          <div class="mt10" v-if="scope.row.out_bill_no != ''">小店订单号：{{ scope.row.out_bill_no }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="210" align="center">
        <template #default="scope">
          <div class="control-flex">
            <el-button type="primary" link :icon="View" @click="handleViewEdit(scope.row, 'view')">查看</el-button>
            <el-button type="primary" link :icon="EditPen" v-permission="'edit'" v-show="scope.row.order_status === 12" @click="handleViewEdit(scope.row, 'edit')">编辑</el-button>
            <el-button v-permission="'dispatch'" type="primary" link :icon="Connection" @click="handleOrderDispatch(scope.row)">移交订单</el-button>
            <el-button v-show="scope.row.order_status === 12" v-permission="'changeDeliveryType'" type="primary" link :icon="EditPen" @click="handleDeliveryType(scope.row)">配送方式</el-button>
            <el-button v-permission="'clone'" type="primary" link :icon="DocumentCopy" @click="handleCopyOrder(scope.row)">复制订单</el-button>
            <el-button
              v-show="
                ['douyinPlatform', 'bytePlatform', 'kuaishouPlatform', 'kuaishouStorePlatform', 'taobaoPlatform', 'littleRedBookStorePlatform', 'meituanStorePlatform'].includes(scope.row.platform) || [9].includes(scope.row.order_rent_type && scope.row.order_rent_type.is_advance)
              "
              type="primary"
              link
              :icon="DocumentCopy"
              @click="handleDouyinStoreOrderNo(scope.row)"
              >小店审核</el-button
            >
            <el-button v-permission="'updateOrderAddress'" type="primary" link :icon="EditPen" @click="handleEditAddress(scope.row)">修改地址</el-button>
            <el-button v-permission="'updateBillStagingTime'" type="primary" link :icon="EditPen" @click="handleDeductionData(scope.row)">生成日期</el-button>
            <el-button v-show="scope.row.order_status === 12" v-permission="'changeStore'" type="primary" link :icon="EditPen" @click="handleChangeStore(scope.row)">修改店铺</el-button>
            <el-button v-permission="'updateImage'" type="primary" link :icon="EditPen" @click="handleUploadReceipt(scope.row)">上传图片</el-button>
            <div v-show="scope.row.order_status === 12" v-permission="'cancel'">
              <el-popconfirm placement="top" width="160" title="你确定要取消订单吗?" @confirm="handleCancelOrder(scope.row.id)">
                <template #reference>
                  <el-button link :icon="Close" type="danger">取消订单</el-button>
                </template>
              </el-popconfirm>
            </div>
            <div v-show="scope.row.is_receipt_signed == 1" v-permission="'deleteReceiptEsign'">
              <el-popconfirm placement="top" width="160" title="你确定要删除回执单吗?" @confirm="handleDeleteReceipt(scope.row.id)">
                <template #reference>
                  <el-button link :icon="Delete" type="success">删除回执单</el-button>
                </template>
              </el-popconfirm>
            </div>
            <div v-show="['douyinPlatform'].includes(scope.row.platform) && scope.row.is_douyin_delivery === 0" v-permission="'allPushDelivery'">
              <el-popconfirm placement="top" width="160" title="你确定要核销整笔订单吗?" @confirm="handlePushDelivery(scope.row.id)">
                <template #reference>
                  <el-button link :icon="Check" type="primary">整单核销</el-button>
                </template>
              </el-popconfirm>
            </div>
            <el-button type="warning" link :icon="ChatDotSquare" @click="handleOrderRemark(scope.row)">平台备注</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        @update:current-page="handleCurrentChange"
        @update:page-size="handleSizeChange"
        layout="total, sizes, prev, pager, next, jumper"
        :page-size="searchCondition.size"
        :current-page="searchCondition.current"
        :page-sizes="[10, 20, 30, 40, 50, 100]"
        :total="total"
        :hide-on-single-page="false">
      </el-pagination>
    </div>
    <!-- 移交订单弹出框 -->
    <DispatchOrderDialog :customerList="customerList" v-model:editVisible="customerVisible" v-model:form="customerForm" @handleSuccess="handleDispatchOrderSuccess" />
    <!-- 修改配送方式弹出框 -->
    <DeliveryTypeDialog :deliveryTypeList="deliveryTypeList" v-model:editVisible="deliveryVisible" v-model:form="deliveryTypeForm" @handleSuccess="handleDeliveryTypeSuccess" />
    <!-- 复制订单弹出框 -->
    <OrderCopyDialog v-model:editVisible="copyOrderVisible" v-model:form="copyOrderForm" @handleSuccess="handleCopyOrderSuccess" />
    <!-- 填写小店订单号弹出框 -->
    <DouyinStoreOrderNoDialog v-model:editVisible="storeOrderNoVisible" v-model:form="storeOrderNoForm" @handleSuccess="handleDouyinStoreOrderNoSuccess" />
    <!-- 修改订单生成日期弹出框 -->
    <UpdateDateDialog :selectPeriodsList="selectPeriodsList" v-model:editVisible="updateDateVisible" v-model:form="updateDateForm" @handleSuccess="handleDeductionDataSuccess" />
    <!-- 修改地址 -->
    <UpdateOrderAddressDialog v-model:editVisible="updateAddressVisible" v-model:form="updateAddressForm" @handleSuccess="handleEditAddressSuccess" />
    <!-- 上传回执单，告客户知情同意书信息 -->
    <UploadReceiptDialog v-model:editVisible="receiptVisible" v-model:form="receiptForm" @handleSuccess="handleReceiptSuccess" />
    <!-- 平台备注弹出框 -->
    <RemarkDialog v-model:editVisible="remarkVisible" v-model:form="sellerRemarkForm" @handleSuccess="handleRemarkSuccess" />
    <!-- 搜索选择店铺 -->
    <SelectStoreDialog v-model:edit-visible="storeVisible" @handleSuccess="handleSelectedData" />
    <!-- 修改绑定的店铺 -->
    <SelectStoreDialog v-model:edit-visible="changeStoreVisible" :otherSearchCondition="otherSearchCondition" @handleSuccess="handleSelected1Data" />
  </div>
</template>

<script setup lang="ts">
import SelectStoreDialog from "@/components/user/storeManager/storeInfo/SelectStoreDialog.vue";
import DispatchOrderDialog from "@/components/rentMachineManage/rentMachineOrderInfo/DispatchOrderDialog.vue";
import DeliveryTypeDialog from "@/components/rentMachineManage/rentMachineOrderInfo/DeliveryTypeDialog.vue";
import OrderCopyDialog from "@/components/rentMachineManage/rentMachineOrderInfo/OrderCopyDialog.vue";
import DouyinStoreOrderNoDialog from "@/components/rentMachineManage/rentMachineOrderInfo/DouyinStoreOrderNoDialog.vue";
import UpdateDateDialog from "@/components/rentMachineManage/rentMachineOrderInfo/UpdateDateDialog.vue";
import UpdateOrderAddressDialog from "@/components/rentMachineManage/rentMachineOrderInfo/UpdateOrderAddressDialog.vue";
import UploadReceiptDialog from "@/components/rentMachineManage/rentMachineOrderInfo/UploadReceiptDialog.vue";
import RemarkDialog from "@/components/rentMachineManage/rentMachineOrderInfo/RemarkDialog.vue";
import { View, Close, Search, Refresh, ChatDotSquare, EditPen, CircleClose, Connection, DocumentCopy, Delete, Check, Download, Plus } from "@element-plus/icons-vue";
import { exportExcel, handleExtractFirstNineAndLastTwoDigits, handleExtractSurnameAndName, handleVerifyFormatDate } from "@/utils/utils";
import type { HasId, ViewMode, ViewModeFilter } from "@/types/common";
import type { IDictData } from "@/types/dict";
import { useState } from "@/hooks/useState.ts";
import type { IMobile } from "@/types/rentMachineManage/directPurchaseOrderInfo";
import { deleteOrderReceiptEsignInfo, getRentOrderUserMobileInfo, putRentMobileOrderCancelInfo } from "@/utils/api/rentMobileOrder";
import type { IExpressOften } from "@/types/express";
import type { IRentCustomer, IRentMachineOrderInfoList, ISearchRentMachineOrderInfo } from "@/types/rentMachineManage/rentMachineOrderInfo";
import { exportRentMobileOrderInfo, getRentMobileOrderInfo } from "@/utils/api/admin/order/rentOrder";
import type { IStoreInfoList } from "@/types/storeManager/store";
import { putTnstallmentBillAllPushDeliveryInfo } from "@/utils/api/installmentBill";
const { disabledbtn, loading, toggleState } = useState();
const tableList = ref<Array<IRentMachineOrderInfoList>>([]);
/* 移交订单 */
import useDispatchOrder from "@/components/rentMachineManage/rentMachineOrderInfo/hooks/dispatchOrder.ts";
const { customerVisible, customerForm, handleOrderDispatch, handleDispatchOrderSuccess } = useDispatchOrder(getTableInfo);
/* 配送方式 */
import useDeliveryType from "@/components/rentMachineManage/rentMachineOrderInfo/hooks/deliveryType.ts";
const { deliveryVisible, deliveryTypeForm, handleDeliveryType, handleDeliveryTypeSuccess } = useDeliveryType(getTableInfo);
/* 复制订单 */
import useCopyOrder from "@/components/rentMachineManage/rentMachineOrderInfo/hooks/copyOrder.ts";
const { copyOrderVisible, copyOrderForm, handleCopyOrder, handleCopyOrderSuccess } = useCopyOrder(getTableInfo);
/* 小店订单号 */
import useStoreOrderNo from "@/components/rentMachineManage/rentMachineOrderInfo/hooks/storeOrderNo.ts";
const { storeOrderNoVisible, storeOrderNoForm, handleDouyinStoreOrderNo, handleDouyinStoreOrderNoSuccess } = useStoreOrderNo(getTableInfo);
/* 修改订单生成日期 */
import useUpdateDate from "@/components/rentMachineManage/rentMachineOrderInfo/hooks/updateDate.ts";
const { updateDateVisible, updateDateForm, selectPeriodsList, handleDeductionData, handleDeductionDataSuccess } = useUpdateDate(toggleState, getTableInfo);
/* 修改选择店铺 */
import useChangeStore from "@/components/rentMachineManage/rentMachineOrderInfo/hooks/changeStore.ts";
const { changeStoreVisible, otherSearchCondition, handleChangeStore, handleSelected1Data } = useChangeStore(toggleState, tableList);
/* 修改地址 */
import useUpdateAddress from "@/components/rentMachineManage/rentMachineOrderInfo/hooks/updateAddress.ts";
const { updateAddressVisible, updateAddressForm, handleEditAddress, handleEditAddressSuccess } = useUpdateAddress(getTableInfo);
/* 上传图片 */
import useReceipt from "@/components/rentMachineManage/rentMachineOrderInfo/hooks/receipt.ts";
const { receiptVisible, receiptForm, handleUploadReceipt, handleReceiptSuccess } = useReceipt(toggleState, getTableInfo);
/* 平台备注弹出框 */
import useSellerRemark from "@/components/rentMachineManage/rentMachineOrderInfo/hooks/sellerRemark.ts";
const { remarkVisible, sellerRemarkForm, handleOrderRemark, handleRemarkSuccess } = useSellerRemark(getTableInfo);

interface Props {
  rentMobileOrderType: Array<IDictData>;
  deliveryTypeList: Array<IDictData>;
  selectPlatformType: Array<IDictData>;
  selectWhether: Array<IDictData>;
  orderStatusList: Array<IDictData>;
  logisticsList: Array<IExpressOften>;
  selectSearchType: Array<IDictData>;
  customerList: Array<IRentCustomer>;
}
const { deliveryTypeList, rentMobileOrderType, selectPlatformType, selectWhether, orderStatusList, selectSearchType, customerList } = defineProps<Props>();

const emit = defineEmits<{
  handleAdd: [code: ViewMode];
  handleToPrint: [ids: number[]];
  handleViewEdit: [id: number, code: ViewModeFilter];
}>();
/* 暴露一个方法给父组件使用 */
defineExpose({
  /* 这一步关键，在setup语法糖中使用时 */
  getTableInfo
});
/* 显示隐藏选择店铺 */
const storeVisible = ref<boolean>(false);
const multipleTableRef = useTemplateRef("multipleTableRef"); /* 列表组件的引用 */
const queryDate = ref<Array<string>>([]);
const payTime = ref<Array<string>>([]);
const deliveryTime = ref<Array<string>>([]);
const total = ref(0);

const searchCondition = reactive<ISearchRentMachineOrderInfo>({
  platform: [],
  order_sn: "",
  mobile: "",
  order_status: "",
  delivery_type: "",
  pay_status: "",
  is_axz: "",
  name: "",
  /* 5租机，8全款购机 */
  is_direct: "5",
  start_create_time: "",
  end_create_time: "",
  out_bill_no: "",
  id_number: "",
  bind_store_id: "",
  bind_store_name: "",
  rent_mobile_order_type: "",
  self_employed: "",
  customer_id: "",
  master_name: "",
  search_type: "",
  size: 10,
  current: 1
});

/* 时间更改事件 */
function changeQueryDate(data: number[]) {
  if (data !== null) {
    searchCondition.start_create_time = data[0];
    searchCondition.end_create_time = data[1];
  } else {
    searchCondition.start_create_time = "";
    searchCondition.end_create_time = "";
  }
}
/* 搜索 */
function searchInfo() {
  searchCondition.current = 1;
  searchCondition.size = 10;
  getTableInfo();
}

/**
 * 重置搜索内容
 */
function resetSearch() {
  searchCondition.platform = [];
  searchCondition.order_sn = "";
  searchCondition.mobile = "";
  searchCondition.order_status = "";
  searchCondition.delivery_type = "";
  searchCondition.pay_status = "";
  searchCondition.is_axz = "";
  searchCondition.name = "";
  searchCondition.start_create_time = "";
  searchCondition.end_create_time = "";
  searchCondition.out_bill_no = "";
  searchCondition.id_number = "";
  searchCondition.bind_store_id = "";
  searchCondition.bind_store_name = "";
  searchCondition.rent_mobile_order_type = "";
  searchCondition.self_employed = "";
  searchCondition.customer_id = "";
  searchCondition.master_name = "";
  searchCondition.search_type = "";

  queryDate.value = [];
  payTime.value = [];
  deliveryTime.value = [];
  searchCondition.current = 1;
  searchCondition.size = 10;

  getTableInfo();
}

/**
 * 切换表单状态（ 添加、编辑、查看 ，隐藏none ）
 */
function changeFormStatus(state: ViewMode) {
  // formStatus.value = state;
  emit("handleAdd", state);
}

/* 请求：获取表格中数据 */
function getTableInfo() {
  toggleState(true);
  getRentMobileOrderInfo<IRentMachineOrderInfoList, ISearchRentMachineOrderInfo>(searchCondition)
    .then(res => {
      /* 截取 姓 手机号后两位 */
      res.result.data.forEach(item => {
        const { firstName, lastName } = handleExtractSurnameAndName(item.name);
        const { firstPhone, lastPhone } = handleExtractFirstNineAndLastTwoDigits(item.mobile);
        item.firstName = firstName;
        item.lastName = lastName;
        item.firstPhone = firstPhone;
        item.lastPhone = lastPhone;
      });
      tableList.value = res.result.data;
      total.value = res.result.total;
    })
    .finally(() => {
      toggleState(false);
    });
}

/* 显示第几页 */
function handleCurrentChange(val: number) {
  searchCondition.current = val;
  getTableInfo();
}

/* 每页显示几条 */
function handleSizeChange(val: number) {
  searchCondition.current = 1;
  searchCondition.size = val;
  getTableInfo();
}

/* 触发处理 查看编辑事件 */
function handleViewEdit(row: IRentMachineOrderInfoList, code: ViewModeFilter) {
  emit("handleViewEdit", row.id, code);
}

/* 双击当前行 */
function rowDblclick(row: IRentMachineOrderInfoList) {
  multipleTableRef.value!.toggleRowSelection(row);
}

/* 选择店铺 */
function handleSelectStore() {
  storeVisible.value = true;
}
/* 清除店铺选择数据 */
function handleClearStoreInfo() {
  if (searchCondition.bind_store_id == "") return;
  searchCondition.bind_store_id = "";
  searchCondition.bind_store_name = "";
  getTableInfo();
}
/* 选择选中的店铺数据 */
function handleSelectedData(list: IStoreInfoList[]) {
  searchCondition.bind_store_id = list[0].id;
  searchCondition.bind_store_name = list[0].store_name;
  getTableInfo();
}
/* 取消订单 */
function handleCancelOrder(id: number) {
  toggleState(true);
  putRentMobileOrderCancelInfo({ id })
    .then(res => {
      ElMessage.success(res.msg);
      /* 修改订单状态 */
      handleChangeOrderStatus(id, 4);
    })
    .catch(() => {})
    .finally(() => {
      toggleState(false);
    });
}

/* 修改订单状态 */
function handleChangeOrderStatus(id: number, status: number) {
  const item = tableList.value.find(item => item.id === id);
  if (!item) return;
  item.order_status = status;
  item.status_name = orderStatusList.find(s => s.dictValue == status + "")?.dictLabel || "";
}

/* 查看手机号 */
function handleViewMobile(row: IRentMachineOrderInfoList) {
  toggleState(true);
  getRentOrderUserMobileInfo<IMobile, HasId>({ id: row.id })
    .then(res => {
      ElMessage.success("查询成功");
      const item = tableList.value.find(order => order.id === row.id);
      if (item) {
        item.mobile = res.result.mobile;
        const { firstPhone, lastPhone } = handleExtractFirstNineAndLastTwoDigits(item.mobile);
        item.firstPhone = firstPhone;
        item.lastPhone = lastPhone;
      }
    })
    .catch(() => {})
    .finally(() => {
      toggleState(false);
    });
}

/* 删除回执单 */
function handleDeleteReceipt(id: number) {
  toggleState(true);
  deleteOrderReceiptEsignInfo({ id })
    .then(res => {
      ElMessage.success(res.msg);
      const item = tableList.value.find(item => item.id === id);
      if (!item) return;
      item.is_receipt_signed = 0;
    })
    .catch(() => {})
    .finally(() => {
      toggleState(false);
    });
}

/* 核销所有账单状态 */
function handlePushDelivery(id: number) {
  toggleState(true);
  putTnstallmentBillAllPushDeliveryInfo({ id })
    .then(res => {
      ElMessage.success(res.msg);
      const item = tableList.value.find(item => item.id === id);
      if (!item) return;
      item.is_douyin_delivery = 1;
    })
    .catch(() => {})
    .finally(() => {
      toggleState(false);
    });
}

/* 导出excel文件 */
function handleExportRentMobileOrderInfo() {
  toggleState(true);
  exportRentMobileOrderInfo(searchCondition)
    .then((res: Blob) => {
      ElMessage.success("请稍后，正在下载中...");
      exportExcel(res, "新机租机订单信息" + new Date().getTime());
    })
    .catch(() => {})
    .finally(() => {
      toggleState(false);
    });
}

getTableInfo();
</script>

<style lang="scss" scoped>
/* layout-布局 */
.el-col {
  border-radius: 4px;
}

.mb10 {
  margin-bottom: 10px;
}
/* 关键：列表右侧操作按钮的对其 */
:deep(.el-space__item) {
  line-height: 15px;
}

.el-button.is-text + .el-button.is-text {
  margin-left: 0;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.del-dialog-cnt {
  font-size: 16px;
  text-align: center;
}

.table {
  width: 100%;
  font-size: 14px;
}
.textAlignCenter {
  text-align: center;
}

/* 确定按钮的显示与隐藏 */
.displaybtn {
  display: none;
}

/* 提示图标设置 */
.icon-wzg-config {
  height: 30px;
  line-height: 30px;
}

.w-tag .el-tag {
  margin: 2px 5px;
}

.red {
  color: #f00;
}
.fwb {
  font-weight: bold;
}
</style>
